<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h1>仪表盘</h1>
      <p>欢迎回来，{{ userStore.userInfo?.name }}</p>
    </div>
    
    <div class="stats-grid">
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon projects">
            <el-icon><Folder /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.totalProjects }}</div>
            <div class="stat-label">总项目数</div>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon tasks">
            <el-icon><List /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.totalTasks }}</div>
            <div class="stat-label">总任务数</div>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon completed">
            <el-icon><Check /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.completedTasks }}</div>
            <div class="stat-label">已完成任务</div>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon pending">
            <el-icon><Clock /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.pendingTasks }}</div>
            <div class="stat-label">进行中任务</div>
          </div>
        </div>
      </el-card>
    </div>
    
    <div class="dashboard-content">
      <div class="content-left">
        <el-card class="recent-projects">
          <template #header>
            <div class="card-header">
              <span>最近项目</span>
              <el-button type="text" @click="$router.push('/projects')">
                查看全部
              </el-button>
            </div>
          </template>
          
          <div v-if="loading" class="loading-container">
            <el-skeleton :rows="3" animated />
          </div>
          
          <div v-else-if="recentProjects.length === 0" class="empty-state">
            <el-empty description="暂无项目" />
          </div>
          
          <div v-else class="project-list">
            <div
              v-for="project in recentProjects"
              :key="project.id"
              class="project-item"
              @click="goToProject(project)"
            >
              <div class="project-info">
                <h4>{{ project.name }}</h4>
                <p>{{ project.description || '暂无描述' }}</p>
                <div class="project-meta">
                  <span class="status" :class="getStatusClass(project.status)">
                    {{ getStatusText(project.status) }}
                  </span>
                  <span class="date">{{ formatDate(project.createdAt) }}</span>
                </div>
              </div>
              <el-icon class="arrow"><ArrowRight /></el-icon>
            </div>
          </div>
        </el-card>
      </div>
      
      <div class="content-right">
        <RecentLogs />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useProjectStore } from '@/stores/project'
import { getProjectList, type Project } from '@/api/project'
import { getTaskList } from '@/api/task'
import RecentLogs from '@/components/RecentLogs.vue'
import dayjs from 'dayjs'

const router = useRouter()
const userStore = useUserStore()
const projectStore = useProjectStore()

const loading = ref(false)
const recentProjects = ref<Project[]>([])

const stats = reactive({
  totalProjects: 0,
  totalTasks: 0,
  completedTasks: 0,
  pendingTasks: 0
})

const fetchDashboardData = async () => {
  loading.value = true
  try {
    // 获取最近项目
    const projectResult = await getProjectList({
      pageDto: { pageNumber: 1, pageSize: 5 }
    })

    recentProjects.value = projectResult.data.items
    stats.totalProjects = projectResult.data.totalCount
    
    // 获取任务统计
    const taskResult = await getTaskList({
      projectId: 0, // 获取所有项目的任务
      isMy: true,
      pageDto: { pageNumber: 1, pageSize: 100 }
    })
    
    // 计算统计数据
    stats.totalTasks = taskResult.data.totalCount
    stats.completedTasks = taskResult.data.items.filter(task => task.status === 1).length
    stats.pendingTasks = taskResult.data.items.filter(task => task.status === 0).length
  } catch (error) {
    console.error('获取仪表盘数据失败:', error)
  } finally {
    loading.value = false
  }
}

const goToProject = (project: Project) => {
  router.push(`/projects/${project.id}`)
}

const getStatusClass = (status: number) => {
  return status === 1 ? 'completed' : 'ongoing'
}

const getStatusText = (status: number) => {
  return status === 1 ? '已完成' : '进行中'
}


const formatDate = (date: string) => {
  return dayjs(date).format('MM-DD')
}

onMounted(() => {
  fetchDashboardData()
})
</script>

<style scoped lang="scss">
.dashboard {
  .dashboard-header {
    margin-bottom: 24px;
    
    h1 {
      font-size: 28px;
      color: #333;
      margin-bottom: 8px;
    }
    
    p {
      color: #666;
      font-size: 14px;
    }
  }
  
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
    
    .stat-card {
      .stat-content {
        display: flex;
        align-items: center;
        
        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          font-size: 24px;
          color: white;
          
          &.projects {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }
          
          &.tasks {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }
          
          &.completed {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }
          
          &.pending {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
          }
        }
        
        .stat-info {
          .stat-number {
            font-size: 32px;
            font-weight: bold;
            color: #333;
            line-height: 1;
          }
          
          .stat-label {
            color: #666;
            font-size: 14px;
            margin-top: 4px;
          }
        }
      }
    }
  }
  
  .dashboard-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .loading-container {
      padding: 20px 0;
    }
    
    .empty-state {
      padding: 40px 0;
    }
    
    .project-list, .task-list {
      .project-item, .task-item {
        padding: 16px 0;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        &:last-child {
          border-bottom: none;
        }
        
        &:hover {
          background-color: #f8f9fa;
          margin: 0 -16px;
          padding: 16px;
          border-radius: 8px;
        }
        
        .project-info, .task-info {
          flex: 1;
          
          h4 {
            font-size: 16px;
            color: #333;
            margin-bottom: 4px;
          }
          
          p {
            color: #666;
            font-size: 14px;
            margin-bottom: 8px;
          }
          
          .project-meta, .task-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            
            .status {
              padding: 2px 8px;
              border-radius: 4px;
              font-size: 12px;
              
              &.completed {
                background-color: #f0f9ff;
                color: #1890ff;
              }
              
              &.ongoing, &.pending {
                background-color: #fff7e6;
                color: #fa8c16;
              }
            }
            
            .date, .due-date {
              color: #999;
              font-size: 12px;
            }
          }
        }
        
        .arrow {
          color: #ccc;
          font-size: 16px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .dashboard-content {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>


